<script setup>
import { ref } from 'vue'
import { random, guid } from '@/uni_modules/uview-plus'

// 获取瀑布流组件实例
const waterfall = ref(null)

const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	type_key: {
		type: String,
		default: ''
	},
	collect: {
		type: Boolean,
		default: false
	}
})

// 点击跳转详情页
const onClickItem = (item) => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Detail/Detail?detail_id=${item.id}&type=${props.collect ? item.type : props.type_key}`
	})
}
</script>

<template>
	<view class="post-container">
		<up-waterfall v-model="props.list">
			<template v-slot:left="{ leftList }">
				<view class="water-item" v-for="(item, index) in leftList" :key="index" @tap="onClickItem(item)">
					<view class="list-item-top" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>

					<view class="list-item-bottom" v-if="item.user">
						<view class="title">{{ item.title }}</view>
						<view class="info">
							<view class="user">
								<up-image :src="item.user.avatar" width="30" height="30" shape="circle"></up-image>
								<view class="username">{{ item.user.username }}</view>
							</view>
							<view class="time">{{ item.createdAt }}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="water-item" v-for="(item, index) in rightList" :key="index" @tap="onClickItem(item)">
					<view class="list-item-top" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>

					<view class="list-item-bottom" v-if="item.user">
						<view class="title">{{ item.title }}</view>
						<view class="info">
							<view class="user">
								<up-image :src="item.user.avatar" width="30" height="30" shape="circle"></up-image>
								<view class="username">{{ item.user.username }}</view>
							</view>
							<view class="time">{{ item.createdAt }}</view>
						</view>
					</view>
				</view>
			</template>
		</up-waterfall>
	</view>
</template>

<style lang="scss" scoped>
.post-container {
	padding: 10rpx;
	height: 100%;
	background-color: #fff;

	.water-item {
		padding: 8rpx;

		.list-item-top {
			width: 100%;
			height: 350rpx;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 20rpx 20rpx 0 0;
		}

		.list-item-bottom {
			width: 100%;
			background-color: #fff;
			border-radius: 0 0 20rpx 20rpx;
			border: 2rpx solid #f5f5f5;
			padding: 10rpx;

			.title {
				padding: 20rpx;
			}

			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;

				.user {
					display: flex;
					align-items: center;

					.username {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
}
</style>
